<template>
  <el-dialog
      v-model="editProductVisible"
      title="添加房屋信息"
      width="30%"
      center
      @close="closeEditDialog(false)"
  >
    <el-form ref="validateForm" :model="familyForm" :rules="houseRules" label-width="120px" class="demo-dynamic" status-icon>
      <el-form-item label="户主" prop="house_name">
        <el-input v-model="familyForm.house_owner" placeholder="Enter house_name...">

        </el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="familyForm.address" placeholder="Enter address...">

        </el-input>
      </el-form-item>
      <el-form-item label="成员总数 " prop="family_id">
        <el-input v-model="familyForm.sum" placeholder="Enter family_id...">

        </el-input>
      </el-form-item>
      <el-form-item label="地区编号 " prop="region_id">
        <el-input v-model="familyForm.region_id" placeholder="Enter region_id...">

        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="() => {
          closeEditDialog(false);
        }">取消</el-button>
        <el-button type="primary" @click="submitEdit"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script >
import {reactive, toRefs, ref, onMounted} from "vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";
//根据房屋编号，查询要编辑的数据
function houseLoadEditData(state){
  axios.get("/api/family?ID="+state.familyID).then((res) => {
    state.familyForm = res.data.data.family
  })
}
//提交编辑
function houseEdit(state, validateForm, emit){
  const submitEdit = () => {
    validateForm.value.validate((vaild) => {
      if(vaild){
        const params={
          ID:state.familyID,
          house_owner:state.familyForm.house_owner,
          address:state.familyForm.address,
          sum:parseInt(state.familyForm.sum),
          region_id:state.familyForm.region_id
        };
        axios.put("/api/family", (params)).then((res) => {
          emit('onCloseDialog', false, res);
        })
      }
    })
  }
  return {submitEdit}
}
export default {
  name: "AddUser",
  props: {
    editProductVisible:Boolean,
    familyID:Number
  },
  emits: ["onCloseDialog"],
  setup(props, {emit}) {
    const validateForm = ref();
    const state=reactive({
      editProductVisible:props.editProductVisible,
      familyID:props.familyID,
      familyForm:{
        house_owner:"",
        sum:0,
        region_id:1,
        address:""
      }
    });
    const houseRules = {
      house_owner: [{required: true, message: 'Please input house_owner', trigger: 'blur',}],
      address: [{required: true, message: 'Please input address', trigger: 'blur',}],
      sum: [{required: true, message: 'Please input sum', trigger: 'blur',}],
      region_id: [{required: true, message: 'Please input region_id', trigger: 'blur',}],
    }
    const closeEditDialog = (visible) => {
      emit('onCloseDialog', visible)
    }
    const handleClose = (done) => {
      ElMessageBox.confirm('Are you sure to close this dialog?')
          .then(() => {
            done()
          })
          .catch(() => {
            // catch error
          })
    }
    onMounted(() => {
      houseLoadEditData(state);
    })
    return {
      ...toRefs(state),
      handleClose,
      closeEditDialog,
      houseRules,
      validateForm,
      ...houseEdit(state, validateForm, emit)
    }
  }
}
</script>

<style scoped>

</style>